<template>
  <div>
    <el-card v-if="drawerData != null"
             class="box_card">
      <div class="box_close"
           @click="drawerClose()">
        <i class="el-icon-close"></i>
      </div>
      <div class="box_heard"
           :style="{
             background:
               drawerData.isWarning && drawerData.isAlarming == false
                 ? '#ff8100'
                 : drawerData.isAlarming
                   ? 'red'
                   : '#28d0ac'
           }">
        <div class="box_title">
          <span>{{ drawerData.collectLocation }} {{ drawerData.collectName }}</span>
        </div>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="关联摄像机"
                     name="first">
          <div class="tabs_content tabs_video">
            <div v-if="videoList.length > 0">
              <div v-for="item in videoList"
                   :key="item.cameraId"
                   class="video_div">
                <el-button @click="openVideo(item)">
                  {{ item.cameraName }}</el-button>
              </div>
              <div class="video_play">
                <!-- <EasyPlayer :videoUrl="videoData != null ? videoData.streamUrl : ''"
                            :video-title="videoData != null ? videoData.cameraName : ''"
                            fluent
                            autoplay
                            live
                            muted
                            flash></EasyPlayer> -->
              </div>
            </div>

            <div v-else
                 class="not_video">
              <el-image style="width: 100px; height: 100px"
                        src="/static/img/electricVehicle/no-history.png"></el-image>
              <span>无关联摄像机</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="预警事件"
                     name="second">
          <div class="tabs_content box_warning">
            <div v-if="drawerData.warningData">
              <el-card v-for="item in drawerData.warningData"
                       :key="item.id"
                       class="box_warning_card">
                <div class="box_basic">
                  <span class="box_basic_label">报警原因</span>
                  <span>{{ item.alarmName }}</span>
                </div>
                <!--  <div class="box_basic">
                  <span class="box_basic_label">报警原因</span>
                  <span>{{item.alarmCause ? item.alarmCause : '暂无数据' }}</span>
                </div> -->
                <div class="box_basic">
                  <span class="box_basic_label">报警类型</span>
                  <span>
                    <template v-if="item.deviceStatus === 1">故障</template>
                    <template v-else-if="item.deviceStatus === 2">预警</template>
                    <template v-else>暂无数据</template></span>
                </div>
                <div class="box_basic">
                  <span class="box_basic_label">工单状态</span>
                  <span>
                    <template v-if="item.jobStatus === 1">
                      <el-tag size="mini"
                              type="success">已接单</el-tag>
                    </template>
                    <template v-else-if="item.jobStatus === 2">
                      <el-tag size="mini"
                              type="info">已处理</el-tag>
                    </template>
                    <template v-else-if="item.jobStatus === 3">
                      <el-tag size="mini"
                              type="success">审核通过</el-tag>
                    </template>
                    <template v-else-if="item.jobStatus === 4">
                      <el-tag size="mini"
                              type="danger">审核不通过</el-tag>
                    </template>
                    <template v-else>
                      <el-tag size="mini"
                              type="info">未派单</el-tag>
                    </template>
                  </span>
                </div>
                <div class="box_basic">
                  <span class="box_basic_label">审核人姓名</span>
                  <span>
                    {{
                      item.auditUserName ? item.auditUserName : "暂无数据"
                    }}</span>
                </div>
                <div class="box_basic">
                  <span class="box_basic_label">报警时间</span>
                  <span>{{
                    item.alertTime ? item.alertTime : "暂无数据"
                  }}</span>
                </div>
              </el-card>
            </div>
            <div v-else
                 class="not_video">
              <el-image style="width: 100px; height: 100px"
                        src="/static/img/electricVehicle/no-history.png"></el-image>
              <span>无预警事件</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="基本信息"
                     name="third">
          <div class="tabs_content basic_div">
            <div class="box_basic">
              <span class="box_basic_label">设备类型</span>
              <span>{{ drawerData.collectTypeStr }}</span>
            </div>
            <template v-if="
              drawerData.mergeType === 'smoke' &&
                drawerData.deviceData != null
            ">
              <!-- <div class="box_basic">
                <span class="box_basic_label">心跳周期</span>
                <span>{{drawerData.deviceData.interval}}</span>
              </div> -->
              <div class="box_basic">
                <span class="box_basic_label">烟雾状态</span>
                <span>{{ drawerData.deviceData.smokeStr }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">温度</span>
                <span>{{ drawerData.deviceData.temperature }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">湿度</span>
                <span>{{ drawerData.deviceData.humidityStr }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">电量</span>
                <span>{{ drawerData.deviceData.battery }}</span>
                <span class="box_basic_label">%</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">是否部署</span>
                <span>{{ drawerData.deviceData.deployFlagStr }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">是否有人</span>
                <span>{{ drawerData.deviceData.humanDetectionStr }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">光线</span>
                <span>{{ drawerData.deviceData.lightLevelStr }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">凝露</span>
                <span>{{ drawerData.deviceData.cdsStr }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">设备编号</span>
                <span>{{ drawerData.collectCode }}</span>
              </div>
            </template>
            <template v-if="
              drawerData.mergeType === 'elec_fire' &&
                drawerData.deviceData != null &&
                drawerData.collectModel === 'EF-2'
            ">
              <div class="box_basic">
                <span class="box_basic_label">传输周期(s)</span>
                <span>{{
                  drawerData.deviceData.intervals === null
                    ? "无数据"
                    : drawerData.deviceData.intervals
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">电线温度(°C)</span>
                <span>{{
                  drawerData.deviceData.tempVal === null
                    ? "无数据"
                    : drawerData.deviceData.tempVal
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">⽤电量(kW·h)</span>
                <span>{{
                  drawerData.deviceData.elecEnergyVal === null
                    ? "无数据"
                    : drawerData.deviceData.elecEnergyVal
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">功率(kW)</span>
                <span>{{
                  drawerData.deviceData.factor === null
                    ? "无数据"
                    : drawerData.deviceData.factor
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">漏电流(mA)</span>
                <span>{{
                  drawerData.deviceData.leakageVal === null
                    ? "无数据"
                    : drawerData.deviceData.leakageVal
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">电压(V)</span>
                <span>{{
                  drawerData.deviceData.volVal === null
                    ? "无数据"
                    : drawerData.deviceData.volVal
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">电流(A)</span>
                <span>{{
                  drawerData.deviceData.currVal === null
                    ? "无数据"
                    : drawerData.deviceData.currVal
                }}</span>
              </div>
            </template>
            <template v-if="
              drawerData.mergeType === 'elec_fire' &&
                drawerData.deviceData != null &&
                drawerData.collectModel === 'EF-3'
            ">
              <div class="box_basic">
                <span class="box_basic_label">A相温度(°C)</span>
                <span>{{
                  drawerData.deviceData.t1Val === null
                    ? "无数据"
                    : drawerData.deviceData.t1Val
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">B相温度(°C)</span>
                <span>{{
                  drawerData.deviceData.t2Val === null
                    ? "无数据"
                    : drawerData.deviceData.t2Val
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">C相温度(°C)</span>
                <span>{{
                  drawerData.deviceData.t3Val === null
                    ? "无数据"
                    : drawerData.deviceData.t3Val
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">箱体温度(°C)</span>
                <span>{{
                  drawerData.deviceData.t4Val === null
                    ? "无数据"
                    : drawerData.deviceData.t4Val
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">A相电压(V)</span>
                <span>{{
                  drawerData.deviceData.aval === null
                    ? "无数据"
                    : drawerData.deviceData.aval
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">B相电压(V)</span>
                <span>{{
                  drawerData.deviceData.bval === null
                    ? "无数据"
                    : drawerData.deviceData.bval
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">C相电压(V)</span>
                <span>{{
                  drawerData.deviceData.cval === null
                    ? "无数据"
                    : drawerData.deviceData.cval
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">A相电流(A)</span>
                <span>{{
                  drawerData.deviceData.acurr === null
                    ? "无数据"
                    : drawerData.deviceData.acurr
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">B相电流(A)</span>
                <span>{{
                  drawerData.deviceData.bcurr === null
                    ? "无数据"
                    : drawerData.deviceData.bcurr
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">C相电流(A)</span>
                <span>{{
                  drawerData.deviceData.ccurr === null
                    ? "无数据"
                    : drawerData.deviceData.ccurr
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">总有功功率(kW)</span>
                <span>{{
                  drawerData.deviceData.totalYg === null
                    ? "无数据"
                    : drawerData.deviceData.totalYg
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">总无功功率(kvar)</span>
                <span>{{
                  drawerData.deviceData.totalWg === null
                    ? "无数据"
                    : drawerData.deviceData.totalWg
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">总视在功率(kVA)</span>
                <span>{{
                  drawerData.deviceData.totalSz === null
                    ? "无数据"
                    : drawerData.deviceData.totalSz
                }}</span>
              </div>
              <div class="box_basic">
                <span class="box_basic_label">总功率因数</span>
                <span>{{
                  drawerData.deviceData.totalFactor === null
                    ? "无数据"
                    : drawerData.deviceData.totalFactor
                }}</span>
              </div>
            </template>
            <div class="box_basic">
              <span class="box_basic_label">地点</span>
              <span>{{ drawerData.collectLocation }}</span>
            </div>
            <div class="box_basic">
              <span class="box_basic_label">联系人</span>
              <span>{{ drawerData.maintenancePerson }}-{{
                drawerData.maintenancePhone
              }}</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
// import EasyPlayer from 'easy-player'
export default {
  components: {
    // EasyPlayer
  },
  props: {
    drawerData: { type: Object, default: null }
  },
  data() {
    return {
      videoList: [],
      isDisplayDrawer: false,
      activeName: 'first',
      videoData: null
    }
  },
  watch: {
    drawerData(data) {
      this.init(data)
    }
  },
  mounted() {
    // this.init(this.drawerData)
  },
  methods: {
    init(data) {
      if (data.mergeType === 'smoke') {
        this.getSmokeData(data.collectCode)
      } else if (
        data.mergeType === 'elec_fire' &&
        data.collectModel === 'EF-2'
      ) {
        this.singlePhaseElecFireReport(data.collectCode)
      } else if (
        data.mergeType === 'elec_fire' &&
        data.collectModel === 'EF-3'
      ) {
        this.threePhaseElecFireReport(data.collectCode)
      }
      this.getByEquipmentId(data.id)
    },
    openVideo(data) {
      this.videoData = data
    },
    drawerClose() {
      this.$emit('drawerClose')
      this.videoData = null
    },
    getByEquipmentId(id) {
      this.$get('console/equipmentMonitorSettings/getByEquipmentId', {
        equipmentId: id
      }).then(res => {
        // 判断该设备是否有关联的监控
        if (res.data) {
          this.videoList = JSON.parse(res.data.layout)
          // this.equipmentHasMonitor = true
        }
      })
    },
    getSmokeData(code) {
      this.$get('console/smokeReport/list', { deciveSource: code }).then(r => {
        const data = r.data.data.rows[0] || null
        if (data) {
          data['deployFlagStr'] =
            data.deployFlag != null
              ? data.deployFlag
                ? '已部署'
                : '未部署'
              : '/'
          data['humanDetectionStr'] =
            data.humanDetection != null
              ? data.humanDetection
                ? '有人'
                : '无人'
              : '/'
          data['lightLevelStr'] =
            data.lightLevel != null ? this.lightLevelStr(data.lightLevel) : '/'
          data['smokeStr'] =
            data.smoke != null ? (data.smoke ? '有烟' : '无烟') : '无数据'
          data['cdsStr'] = data.cds != null ? (data.cds ? '有' : '无') : '/'
          data['humidityStr'] = data.humidity != null ? data.humidity : '/'
        }
        this.drawerData['deviceData'] = data
      })
    },
    lightLevelStr(num) {
      const lightLevel = {
        0: '黑暗',
        1: '昏暗',
        2: '明亮',
        3: '强光'
      }
      return lightLevel[num]
    },
    singlePhaseElecFireReport(code) {
      this.$get('console/singlePhaseElecFireReport/list', {
        deciveSource: code
      }).then(r => {
        const data = r.data.data.rows[0] || null
        this.drawerData['deviceData'] = data
      })
    },
    threePhaseElecFireReport(code) {
      this.$get('console/threePhaseElecFireReport/list', {
        deciveSource: code
      }).then(r => {
        const data = r.data.data.rows[0] || null
        this.drawerData['deviceData'] = data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box_card {
  position: relative;
}
.box_heard {
  background: #28d0ac;
  width: 375px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
}
.box_basic_label {
  display: block;
  margin-right: 20px;
  width: 90px;
  color: #999;
}
.box_close {
  position: absolute;
  top: 2%;
  right: 2%;
  background: #999;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.box_title {
  text-align: center;
}
.tabs_video {
  max-width: 375px;
  padding-top: 10px;
  overflow: auto;
}
.box_warning {
  overflow: auto;
  .box_warning_card {
    margin-bottom: 5px;
    margin-right: 5px;
    .box_basic {
      margin-bottom: 10px;
      display: flex;
      .box_basic_label {
        display: block;
        margin-right: 20px;
        width: 90px;
        color: #999;
      }
    }
  }
}
.tabs_content {
  height: 220px;
  line-height: 1.5;

  .video_div {
    width: 50%;
    text-align: center;
    float: left;
    border-right: 5px solid #fff;
    margin-bottom: 5px;
  }
  .video_play {
    width: 100%;
    height: 100%;
    float: right;
    margin-top: 3%;
  }
  .not_video {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #999;
    font-size: 14px;
    line-height: 3;
    height: 100%;
  }
  .box_basic {
    margin-bottom: 10px;
    display: flex;
  }
  .box_img_label {
    display: block;
    margin-bottom: 10px;
  }
}
.basic_div {
  overflow: auto;
  padding-right: 5px;
  .box_basic {
    border-bottom: 1px solid #dedede;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }
}
</style>
